<template>
  <div class="menudisdetails">
    <el-main>
        <div id="d1">
            <img :src="getImg(trades.images)" alt="">
        </div>
        <div id="d2">
             <p>商品名称：{{trades.tradeName}}</p>
             <p>配料：{{trades.dosing}}</p>
             <p>益处：{{trades.advantage}}</p>
             <p>价格：<span>￥{{trades.price}}</span></p>
             <el-button @click="getevaluate(trades.tradeID)">查看该商品评价</el-button>
             <el-button type="success" id="button" @click="insertToCart">加入购物车</el-button>
        </div>
    </el-main>
  </div>
</template>
<style  scoped>
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 30px;
  width: 60%;
  margin: 0 auto
}
#d1{
    width: 50%;
    height: 300px;
    float: left;
}
#d2{
    width: 50%;
    height: 300px;
    float: right
}
p{
    width: 100%;
    text-align: left;
    height: 30px;
    margin-top: 20px;
    font-size: 20px
}
span{
    color: #f00;
}
#d2 .el-button:nth-child(1){
    background: #e9eef3;
    border: 1px solid #fff;
    margin-right: 60px;
    color: blue;
}
#d2 .el-button:nth-child(2){
    width: 150px;
    background: rgba(green, green, green, 0.5)
}
</style>
<script>
export default {
    data(){
        return{
            tradeID:this.$route.params.tradeID,
            trades:[]
        }
    },
    created(){
        console.log("商品ID",this.tradeID)
        this.$axios.get("http://localhost:3000/menu/menuID?tradeID="+this.tradeID)
        .then(res => {
            console.log("商品详情:",res.data.data[0])
            this.trades = res.data.data[0]
        })
        .catch(err => {
            console.log("错误信息",err)
        })
    },
    methods:{
        getImg(images){
            let path = "http://localhost:3000/upload/" + images
            return path
        },
        insertToCart(){
            let type = 0
            let discountID = 0
            let tradeID = this.tradeID
            let money = this.trades.price
            this.$axios.get("http://localhost:3000/cart/getTypecart",{
                params:{
                    type:type,
                    discountID:discountID,
                    tradeID:tradeID
                }
            })
            .then(res => {
                if(res.data.data.length > 1 || res.data.data.length == 1){
                    this.cartID = res.data.data[0].cartID
                    this.$axios.put("http://localhost:3000/cart/updateCart?cartID="+this.cartID)
                    .then(res => {
                        console.log("修改成功")
                    })
                    .catch(err => {
                        console.log("修改失败",err)
                    })
                }else{
                    this.$axios.post("http://localhost:3000/cart/insertCart",{
                        type:type,
                        discountID:discountID,
                        tradeID:tradeID,
                        money:money,
                        userId:1,
                    })
                    .then(res => {
                        console.log("添加成功")
                    })
                    .catch(err => {
                        console.log("添加失败",err)
                    })
                }
            })
            .catch(err => {
                console.log("添加失败",err)
            })
        },
        getevaluate(tradeID){
            this.$router.push("/index/evaluate/"+ tradeID)
        }
    }
}
</script>